<template>
  <div>
    <div class="search">
      <slot name="newBtn" />
      <!-- <el-button class="newBtn" size="small" icon="el-icon-plus" @click="$emit('addRole')">新增角色</el-button> -->
    </div>
    <el-table
      v-loading="loading"
      :data="tableList"
      border
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="160" fixed="left" align="center" />
      <el-table-column v-for="(item,index) in tableLabelList" :key="index" :label="item.label" :prop="item.prop" :width="item.width" align="center" />
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="{row}">
          <slot name="option" :row="row">
          <!-- <el-button style="border:0px" type="text">
            <span @click="edit(scope.row.userName)">修改</span>
          </el-button>
          <el-button type="text">
            <span style="color:red" @click="delRole(scope.row.id)">删除</span>
          </el-button> -->
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="space-between" align="middle" class="block">
      <div class="page">
        <div class="page-total">
          <!-- <span>共{{ total }}条记录</span>
        <span>第{{ page.pageIndex }}/{{ totalPage }}页</span> -->
          <slot name="pager" />
        </div>
      </div>
      <el-pagination
        v-if="total > 0"
        :current-page.sync="page.pageIndex"
        :page-size.sync="page.pageSize"
        background
        layout=" prev, next,slot"
        prev-text="上一页"
        next-text="下一页"
        :total="total"
        @current-change="getRoleList"
        @size-change="getRoleList"
      />
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    tableList: {
      type: Array,
      required: true
    },
    tableLabelList: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    page: {
      type: Object,
      default: () => ({})
    },
    total: {
      type: [String, Number],
      default: 0
    },
    totalPage: {
      type: [String, Number],
      default: 0
    }
  },
  methods: {
    // 当页页数发生变化 触发
    getRoleList() {
      this.$emit('getRoleList')
    },
    edit(userName) {
      console.log('edit')
      this.$emit('edit', userName)
    },
    delRole(id) {
      console.log('del')
      this.$emit('del', id)
    }
  }
}
</script>

<style lang="scss">
.search {
margin-bottom: 15px ;
  .newBtn {
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    color: #fff;
  }
}
.operate{
color:blue;
margin-right:10px
}
.revise{
   border:0px;
   span {
    color:blue;margin-right:10px
   }
}
</style>
